<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 导航菜单上的湖大logo -->
      <el-main>
        <!-- 业务管理卡片 -->
        <el-row class="row-card">
          <el-card shadow class="business-card">
            <div class="business-title">业务系统</div>
            <el-row type="flex" align="middle" class="el-row-business">
              <el-col>
                <div class="business-btn"><div class="img-div01" @click="toCourseManagement()"><img src="../../assets/imgs/student/business-img01.png" class="business-img" alt=""></div></div>
                <div class="business-text">我的课程</div>
              </el-col>
              <el-col>
                <div class="business-btn"><div class="img-div02" @click="toCheckExamInspect()"><img src="../../assets/imgs/student/business-img02.png" class="business-img" alt=""></div></div>
                <div class="business-text">监考管理</div>
              </el-col>
              <el-col>
                <div class="business-btn"><div class="img-div03" @click="toSetScore()"><img src="../../assets/imgs/student/business-img03.png" class="business-img" alt=""></div></div>
                <div class="business-text">考试打分</div>
              </el-col>
              <el-col>
                <div class="business-btn"><div class="img-div04" @click="toAnalyseScore()"><img src="../../assets/imgs/student/business-img04.png" class="business-img" alt=""></div></div>
                <div class="business-text">分数分析</div>
              </el-col>
              <el-col>
                <div class="business-btn"><div class="img-div02" @click="toCheckCourse()"><img src="../../assets/imgs/student/business-img02.png" class="business-img" alt=""></div></div>
                <div class="business-text">查询课程</div>
              </el-col>
              <!-- <el-col>
                <div class="business-btn"><div class="img-div02" @click="toEditPersoninfo()"><img src="../../assets/imgs/student/business-img02.png" class="business-img" alt=""></div></div>
                <div class="business-text">修改个人信息</div>
              </el-col> -->
            </el-row>
          </el-card>
        </el-row>

      <!-- 个人中心，我的课表卡片 -->
        <el-row :gutter="10" class="row-card">
          <el-col :span="8">
            <el-card class="col-card-left">
              <div class="title">个人中心</div>
              <el-row>
                <el-col :span="10">
                  <div class="person-picture-div" :style="'background-image: url(' + selfData.avatar_url + ')'">
                    <input type="file" accept="image/jpeg,image/jpg,image/png" class="img-person" @change="changeImage($event)">
                  </div>
                </el-col>
                <el-col :span="14">
                  <div class="personinfo-div">
                    <div class="personinfo">姓名&nbsp;&nbsp;&nbsp;&nbsp;{{selfData.name}}</div>
                    <div class="personinfo">性别&nbsp;&nbsp;&nbsp;&nbsp;{{selfData.sex}}</div>
                    <div class="personinfo">工号&nbsp;&nbsp;&nbsp;&nbsp;{{selfData.id_num}}</div>
                    <div class="personinfo">学历&nbsp;&nbsp;&nbsp;&nbsp;{{selfData.educational_background}}</div>
                    <div class="personinfo">所属院系&nbsp;&nbsp;&nbsp;&nbsp;计算机与信息工程学院</div>
                    <div class="personinfo">最近登录&nbsp;&nbsp;&nbsp;&nbsp;{{selfData.update_time}}</div>
                  </div>
                  <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
                    <info-form
                    :personInfo="selfData"
                    ></info-form>
                    <el-button slot="reference">查看详情</el-button>
                  </el-popover>
                </el-col>
              </el-row>
            </el-card>
          </el-col>

          <!-- 课表展示 -->
          <el-col :span="16">
            <el-card class="col-card-right">
              <div class="title" style="float: left;">我的课表</div>
              <div style="float: right; margin-bottom: 10px;">
                第
                <el-select size="small" @change="findTeacherLesson(weekVal)" v-model="weekVal" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in weeks"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                周
              </div>
              <div>
                <v-ClassTable class="course-table" :classTableData="classTableData" />
              </div>
            </el-card>
          </el-col>

        </el-row>

      <!-- 学校通知、本科生成绩表、消息中心 -->
        <el-row :gutter="10" class="row-card">
          <el-col :span="8">
            <el-card class="col-card-left">
              <el-row class="title-row">
                <el-col :span="12"><div class="title">学校通知</div></el-col>
                <el-col :span="12"><div class="title-more">+更多</div></el-col>
              </el-row>
              <el-row>
                <el-col :span="16"><div class="msg-text">2021年度国家重大工程建议人...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">关于湖北大学2021年10月学习...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-07</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">“迎九秩、贺重阳、办实事”大型...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-05</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">关于严明2021年中秋、国庆期间...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-09-17</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">关于2021年中秋节、国庆节放假...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-09-15</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">学校正大门及周边区域改造工程...</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-09-09</div></el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="col-card-middle">
              <el-row class="title-row">
                <el-col :span="12"><div class="title">本科生成绩表</div></el-col>
                <el-col :span="12"><div class="title-more">+更多</div></el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="finish">完成学分：<span class="red-text">29.5分</span></el-col>
                <el-col :span="12" class="failed">不及格学分：<span class="red-text">0分</span></el-col>
              </el-row><hr>
              <el-table
                :data="scoreTable"
                height="250"
                style="width: 100%">
                <el-table-column
                  prop="coursename"
                  label="课程名称">
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="成绩"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="exam"
                  label="补考/重修（次数）">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="col-card-right">
              <el-row class="title-row">
                <el-col :span="12"><div class="title">消息中心</div></el-col>
                <el-col :span="12"><div class="title-more">+更多</div></el-col>
              </el-row>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row><hr>
              <el-row>
                <el-col :span="16"><div class="msg-text">转专业审核通过</div></el-col>
                <el-col :span="8"><div class="msg-text-time">2021-10-11</div></el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import InfoForm from './components/InfoForm.vue'
import ClassTable from '@/components/ClassTable.vue'
export default {
  data () {
    return {
      isCollapse: false,
      activeMenu: '用户管理',
      loginUser: 'zyw',
      scoreTable: [{
        coursename: '数据库系统原理',
        score: '88',
        exam: '正常考试'
      }, {
        coursename: '软件建模技术',
        score: '76',
        exam: '正常考试'
      }, {
        coursename: 'Windows程序设计实验',
        score: '89',
        exam: '正常考试'
      }, {
        coursename: '数据结构',
        score: '99',
        exam: '正常考试'
      }, {
        coursename: '数据结构实验',
        score: '95',
        exam: '正常考试'
      }],
      selfData: {},
      weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      // 周次的值
      weekVal: 1,
      classTableData: {
        weeks: ['', '一', '二', '三', '四', '五', '六', '日'],
        courses: []
      }
    }
  },
  components: {
    InfoForm,
    'v-ClassTable': ClassTable
  },
  created () {
    this.GetSelfData()
    this.findTeacherLesson(this.weekVal)
  },
  methods: {
    toCourseManagement () {
      this.$router.push('/teacher/coursemanage')
    },
    toCheckExamInspect () {
      this.$router.push('/teacher/inspectexam')
    },
    toSetScore () {
      this.$router.push('/teacher/setscoreentry')
    },
    toCheckCourse () {
      this.$router.push('/teacher/checkcourse')
    },
    toEditPersoninfo () {
      this.$router.push('/teacher/editpersoninfo')
    },
    toAnalyseScore () {
      this.$router.push('/teacher/analysescore')
    },
    // 获取个人信息列表
    async GetSelfData () {
      this.selfData = {}
      const { data: res } = await this.$http.post('user/getSelfMessage')
      if (!res.state) return this.$message.error(res.msg)
      console.log(res)
      this.selfData = res.detail
    },

    // 新增课程上传图片函数
    async changeImage (e) {
      const file = e.target.files[0]
      // 如果没有选择图片就不管，直接return
      if (file.length == 0) {
        return
      }
      // 使用 FileReader 读取文件对象
      const reader = new FileReader()
      // 读取完毕后获取结果，写入到previewImg中
      // reader.onload = event => {
      //   this.previewImg = event.target.result
      // }
      // 把文件对象作为一个 dataURL 读入
      reader.readAsDataURL(file)
      // 创建FormData
      const param = new FormData() // 创建form对象
      param.append('file', file, file.name) // 通过append向form对象添加数据
      console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      // this.addPic = param
      // 直接调用接口
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
        }
      }
      const { data: res } = await this.$http.post(`user/selfAvatar`, param, config)
      if (!res.state) return this.$message.error('上传图像出错!')
      this.$message.success('图片修改成功！')
      this.GetSelfData()
    },

    digital2Chinese (num, identifier) {
      const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
      return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num]
    },
    // 查询教师课表
    async findTeacherLesson (week) {
      const { data: res } = await this.$http.post(`courseManagement/getTable?week=${week}`)
      if (!res.state) return this.$message.error(res.msg)
      this.classTableData.courses = res.detail
      // 定一个占满所有位置的二维数组
      const courses = [
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}],
        [{}, {}, {}, {}, {}, {}, {}]
        // [{}, {}, {}, {}, {}, {}, {}],
        // [{}, {}, {}, {}, {}, {}, {}],
        // [{}, {}, {}, {}, {}, {}, {}]
      ]
      // 这个算法真的还可以，首先将所有的课程用item来遍历一遍
      // 将对应的下标推到courses对应的格子中去
      res.detail.forEach((item, index) => {
        item.forEach((subitem, idx) => {
          courses[index][subitem.weekCode] = subitem
        })
      })
      this.classTableData.courses = courses
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-aside {
    background-color: #C0C4CC;

    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    padding: 0px;
  }

  .business-card {
      width: 100%;
      height: 150px;

      .business-title {
        width: 100px;
        height: 35px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: center;
        line-height: 35px;
        color: white;
        font-size: 15px;
        font-weight: bold;
        background-color: #1a6c46;
      }

      .el-row-business {
        margin: 10px;
      }

      .business-text {
          text-align: center;
          font-size: 18px;
        }

      .business-btn {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .img-div01 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FF6161;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div02 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #FF9933;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div03 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #03A9F5;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .img-div04 {
          width: 50px;
          height: 50px;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #00DEBF;
          box-shadow: 2px 2px 5px rgb(173, 173, 173);
          cursor: pointer;
        }

        .business-img {
          width: 30px;
          height: 30px;
        }
      }
    }

    .row-card {
      margin: 10px;
      margin-bottom: 0px;
    }

    .col-card-left {
      margin-left: 10px;
      height: 350px;
    }

    .col-card-right {
      margin-right: 10px;
      height: 350px;
      overflow: scroll;

      .course-table {
        width: 100%;
        height: 100%;
      }
    }

    .col-card-middle {
      height: 350px;
    }

    .title-row {
      margin-bottom: 20px;
    }

    .title {
      font-size: 15px;
      font-weight: bold;
      color: #1a6c46;
    }

    .title-more {
      font-size: 15px;
      text-align: right;
      font-weight: bold;
      color: rgb(121, 121, 121);
    }

    .msg-text {
      font-size: 14px;
    }

    .msg-text-time {
      font-size: 14px;
      text-align: right;
      color: rgb(121, 121, 121);
    }

    .finish {
      font-size: 14px;
      color: rgb(121, 121, 121);
    }

    .failed {
      font-size: 14px;
      text-align: right;
      color: rgb(121, 121, 121);
    }

    .red-text {
      font-size: 14px;
      color: red;
    }

    .person-picture-div {
      width: 140px;
      height: 170px;
      border-width: 1px;
      border-style:solid;
      border-radius: 4px;
      background: no-repeat;
      background-size: 100% 100%;
      border-color: rgb(201, 201, 201);

      .img-person {
        width: 140px;
        opacity: 0;
        height: 170px;
        border-radius: 4px;
      }
    }

    .personinfo-div {
      line-height: 29px;

      .personinfo {
        color: rgb(121, 121, 121);
        font-size: 15px;
      }
    }

    .class-table {
      .table-wrapper {
          width: 100%;
          height: 100%;
          overflow: auto;
      }
      .tabel-container {
          margin: 7px;

          table {
              table-layout: fixed;
              width: 100%;

              thead {
                  background-color: #67a1ff;
                  th {
                      color: #fff;
                      line-height: 17px;
                      font-weight: normal;
                  }
              }
              tbody {
                  background-color: #eaf2ff;
                  td {
                      color: #677998;
                      line-height: 12px;
                  }
              }
              th,
              td {
                  width: 60px;
                  padding: 12px 2px;
                  font-size: 12px;
                  text-align: center;
              }

              tr td:first-child {
                  color: #333;
                  .period {
                      font-size: 8px;
                  }
              }
          }
      }
  }
}
</style>
